<template>
  <div class="layout">
    <div class="layout-content">
      <header-box></header-box>
      <div class="width-percent-100 content-box ">
        <div class="banner-box">
          <swiper class="swiper-box" :modules="modules" :autoplay="autoplayOptions" autoHeight @swiper="onSwiper"
            @slideChange="onSlideChange">
            <swiper-slide>
              <img class="banner-bk" src="../assets/image/home-bk.jpg" alt="">
              <div class="banner-info-box">
                <div class="banner-info">
                  <div class="banner-title">
                    <span class="orange-color">鄂电RPA </span>应用商店
                  </div>
                  <div class="banner-title2">解锁数字化深层动能，以智能枢纽构建优质服务链</div>
                  <div class="flex-par banner-data">
                    <!--  -->
                    <div class="banner-data-item" style="--i: 0">
                      <div class="data-info-1">全局累计开发</div>
                      <div class="data-info-2">
                        <span class="data-info-2-num">{{ homeData.robotCount }}</span>个
                      </div>
                      <div class="data-info-3">RPA机器人</div>
                    </div>
                    <!--  -->
                    <div class="banner-data-item" style="--i: 1">
                      <div class="data-info-1">涵盖业务</div>
                      <div class="data-info-2">
                        <span class="data-info-2-num">{{ homeData.businessTypeCount }}</span>个
                      </div>
                      <div class="data-info-3">种类</div>
                    </div>
                    <!--  -->
                    <div class="banner-data-item" style="--i: 2">
                      <div class="data-info-1">累计参与</div>
                      <div class="data-info-2">
                        <span class="data-info-2-num">{{ homeData.teamMemberCount }}</span>人
                      </div>
                      <div class="data-info-3">开发</div>
                    </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
            <swiper-slide v-for="item in swiperList" :key="item.id">
              <img class="banner-bk" :src="serverUrl + item.url" alt="">
            </swiper-slide>
          </swiper>
          <div class="glowing-arrow" @click="scrollToContent">
            <img src="../assets/image/to-bottom.png" alt="" class="to-bottom">
          </div>

        </div>
        <div class="info-width flex-par">
          <div class="info-left">
            <div class="list-radio-box">
              <el-radio-group v-model="searchForm.bizType" @change="getPageList" size="small">
                <el-radio label="" border>全部</el-radio>
                <el-radio v-for="item in bizTypeOptions" :key="item.code" :label="item.code" border>{{ item.name }}</el-radio>
              </el-radio-group>
            </div>
            <div class="list-box">
              <!-- 空状态：与应用中心一致的温和提示 -->
              <div v-if="tableData.length === 0" class="empty-state">
                <div class="empty-icon">📝</div>
                <div class="empty-title">该分类下暂无应用</div>
                <div class="empty-desc">快来发布第一个精彩应用吧~</div>
              </div>
              <div class="list-item active-style" v-for="(item, index) in tableData" :key="item" @click="toDetail(item.id)" v-else :style="{ 'animation-delay': index * 0.1 + 's' }">
                <!-- 应用标题和logo在同一行 -->
                <div class="app-header">
                  <div class="app-title">{{ item.rpaRobotName }}</div>
                  <div class="app-mini-logo">
                    <div class="mini-logo-icon">{{ getAppIcon(item.rpaRobotName) }}</div>
                  </div>
                </div>
                
                <!-- 应用介绍文字 -->
                <div class="app-description">
                  <div class="app-content">{{ item.content || '智能RPA机器人，提升工作效率，自动化处理重复性任务。' }}</div>
                  <div class="app-meta">
                    <div class="app-meta-left">
                      <span class="app-developer">{{ item.developerName || '系统管理员' }}</span>
                      <span class="app-date">{{ item.uploadDate }}</span>
                    </div>
                    <div class="app-type-tag">{{ item.businessTypeName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="pagination-box flex-par">
              <el-pagination :currentPage="searchForm.pageNum" :page-size="searchForm.pageSize" :small="true"
                background="#F4F4F4" layout="total,  prev, pager, next" :total="dataTotal"
                @current-change="getPageList" />
            </div>
          </div>
          <div class="info-right">
            <div class="right-list-box">
              <div class="right-list-title flex-par">
                <img src="../assets/image/icon1.png" class="r-list-icon" alt="">
                <div class="r-list-title">最新发布</div>
                <div class="r-list-btn active-style">更多</div>
              </div>
              <div class="r-list">
                <div class="r-list-item flex-par active-style" v-for="item in tableData2" :key="item"
                  @click="toDetail(item.id)">
                  <div class="app-icon-container">
                    <div class="app-icon" :style="{ 'background': getAppIconColor(item.rpaRobotName) }">
                      <span class="app-icon-text">{{ getAppIconText(item.rpaRobotName) }}</span>
                    </div>
                  </div>
                  <div class="r-list-txt">
                    <div class="r-list-info1 slh ">{{ item.rpaRobotName }}</div>
                    <div class="r-list-info2 slh">{{ item.content }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          Copyright © 2025 鄂尔多斯供电公司有限公司 All Rights Reserved.鄂ICP备19047732号
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import headerBox from '@/components/headerBox';
// Import Swiper Vue.js components

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Autoplay } from 'swiper/modules';
import 'swiper/css/autoplay'; // 导入Autoplay样式（可选）

import { getSelectByType, pageSize, getHomeData, serverUrl, carousel } from '@/assets/api/api.js';
export default {
  data: function () {
    return {
      // 注册模块
      modules: [Autoplay],
      autoplayOptions: {
        delay: 5000,  // 切换间隔时间(毫秒) - 改为5秒
        disableOnInteraction: false,  // 用户操作后不停止自动播放
        stopOnLastSlide: false  // 不在最后一张停止
      },
      swiperList: [],
      serverUrl,
      menuList: [],
      radioV: '',
      homeData: {},
      dataTotal: 0,
      tableData2: [],
      tableData: [],
      searchForm: {
        bizType: '',
        subBizType: '',
        pageNum: 1,
        pageSize,
        sortBy: '',//''，id||time||dowmload
      },
      bizTypeOptions: [], // 动态加载的业务类型选项
    };
  },
  components: {
    headerBox,
    Swiper,
    SwiperSlide,
  },
  mounted() {
    this.getHomeDataF()
    this.loadBizTypes()
    this.getPageList()
    this.getPageList2()
    this.getBannerList()
  },
  methods: {
    onSlideChange(e) {
    },
    onSwiper(e) {
    },
    toDetail(id) {
      this.$router.push({ path: '/yingyongDetail/' + id });
    },
    getType(type) {
      console.log(type)
      let items = this.bizTypeOptions.filter(typeItem => typeItem.code == type)
      if (items.length > 0) {
        return items[0].name
      } else {
        return '-'
      }
    },
    // 根据应用名称获取对应的图标
    getAppIcon(appName) {
      const iconMap = {
        '监察': '🔍',
        '监控': '📊',
        '日报': '📋',
        '发票': '🧾',
        '配电': '⚡',
        '设备': '🔧',
        '数据': '📈',
        '财务': '💰',
        '人事': '👥',
        '客服': '🎧',
        '销售': '💼',
        '生产': '🏭',
        '质量': '✅',
        '安全': '🛡️',
        '物流': '🚚',
        '库存': '📦',
        '采购': '🛒',
        '合同': '📄',
        '审批': '✍️',
        '统计': '📊'
      };
      
      // 根据应用名称关键词匹配图标
      for (const [keyword, icon] of Object.entries(iconMap)) {
        if (appName.includes(keyword)) {
          return icon;
        }
      }
      
      // 默认图标
      return '🤖';
    },
    
    // 获取应用图标文字（取应用名称首字符）
    getAppIconText(appName) {
      if (!appName) return 'A';
      return appName.charAt(0).toUpperCase();
    },
    
    // 获取应用图标背景色（根据应用名称生成）
    getAppIconColor(appName) {
      if (!appName) return 'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)';
      
      // 根据应用名称生成一致的颜色（深色系）
      const colors = [
        'linear-gradient(135deg, #2c3e50 0%, #34495e 100%)', // 深蓝灰渐变
        'linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%)', // 深紫渐变
        'linear-gradient(135deg, #2980b9 0%, #3498db 100%)', // 深蓝渐变
        'linear-gradient(135deg, #27ae60 0%, #2ecc71 100%)', // 深绿渐变
        'linear-gradient(135deg, #e67e22 0%, #f39c12 100%)', // 深橙渐变
        'linear-gradient(135deg, #16a085 0%, #1abc9c 100%)', // 深青渐变
        'linear-gradient(135deg, #c0392b 0%, #e74c3c 100%)', // 深红渐变
        'linear-gradient(135deg, #7f8c8d 0%, #95a5a6 100%)', // 深灰渐变
        'linear-gradient(135deg, #8b4513 0%, #cd853f 100%)', // 深棕渐变
        'linear-gradient(135deg, #4a148c 0%, #7b1fa2 100%)', // 深紫红渐变
        'linear-gradient(135deg, #1a237e 0%, #303f9f 100%)', // 深靛蓝渐变
        'linear-gradient(135deg, #bf360c 0%, #ff5722 100%)', // 深橙红渐变
      ];
      
      // 根据应用名称的哈希值选择颜色
      let hash = 0;
      for (let i = 0; i < appName.length; i++) {
        hash = appName.charCodeAt(i) + ((hash << 5) - hash);
      }
      const index = Math.abs(hash) % colors.length;
      return colors[index];
    },
    // 加载业务类型选项
    loadBizTypes() {
      // 首页直接使用公开接口，避免登录检查
      this.fallbackLoadMenu()
    },
    fallbackLoadMenu() {
      import('@/assets/api/api.js').then(api => {
        api.bizTypeMenu().then(res => {
          const children = res?.data?.children || []
          this.bizTypeOptions = children.map(n => ({
            code: n.webMenuId,
            name: n.menuName
          }))
        }).catch(() => { this.bizTypeOptions = [] })
      })
    },
    //   -banner
    getBannerList() {
      carousel()
        .then((res) => {
          // console.log(res)
          if (res.code == 0) {
            this.swiperList = res.data
          }
        })
        .catch((err) => { });
    },
    //   -列表
    getPageList(pageNum) {
      if (pageNum) {
        this.searchForm.pageNum = pageNum
      }
      const params = {
        pageNum: Number(this.searchForm.pageNum) || 1,
        pageSize: Number(this.searchForm.pageSize) || pageSize,
        sortBy: this.searchForm.sortBy || 'id',
        bizType: this.searchForm.bizType || ''
      }
      getSelectByType(params)
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            //console.log(res.data)
            this.tableData = res.data
            this.dataTotal = res.total
          } else {
            // code!=0 显示空状态
            this.tableData = []
            this.dataTotal = 0
          }
        })
        .catch((err) => {
          // 网络异常同样显示空状态
          this.tableData = []
          this.dataTotal = 0
        });
    },
    //   -列表
    getPageList2() {
      getSelectByType({
        type: '',
        pageNum: 1,
        pageSize: 10,
        sortBy: 'time',//''，id||time||dowmload
      })
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            //console.log(res.data)
            this.tableData2 = res.data
          }
        })
        .catch((err) => { });
    },
    getHomeDataF() {
      getHomeData()
        .then((res) => {
          console.log(res)
          if (res.code == 0) {
            this.homeData = res.data
          }
        })
        .catch((err) => { });
    },
    scrollToContent() {
      // 平滑滚动到内容区域
      const contentBox = document.querySelector('.info-width');
      if (contentBox) {
        contentBox.scrollIntoView({ 
          behavior: 'smooth',
          block: 'start'
        });
      }
    },
  },
};
</script>
<style scoped>
.layout {
  height: 100%;
}

.layout-content {
  height: 100%;
  width: 100%;

  background: white;
  /* background-size: 100% 100%; */
}

.content-box {
  height: calc(100% - 70px);
  width: 100%;
  background: linear-gradient(135deg, #F5F6FA 0%, #E6F0FF 50%, #F0F8FF 100%);
  overflow: auto;
  position: relative;
}

.content-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(0, 198, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(0, 123, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.banner-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.swiper-box .swiper-slide {
  width: 100% !important;
  margin-right: 0;
}

.banner-bk {
  width: 100%;
  display: block;
}

/* 发光箭头容器 */
.glowing-arrow {
  position: absolute;
  bottom: 10px;
  left: calc(50% - 50px);
  z-index: 99;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: glowPulse 2s ease-in-out infinite;
}

/* 发光脉冲动画 */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(0, 198, 255, 0.8)) 
            drop-shadow(0 0 10px rgba(0, 198, 255, 0.6))
            drop-shadow(0 0 20px rgba(0, 198, 255, 0.4));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(0, 198, 255, 1)) 
            drop-shadow(0 0 20px rgba(0, 198, 255, 0.8))
            drop-shadow(0 0 30px rgba(0, 198, 255, 0.6))
            drop-shadow(0 0 40px rgba(0, 198, 255, 0.4));
    transform: scale(1.1);
  }
}

/* 箭头图片样式 */
.to-bottom {
  width: 100px;
  height: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* 悬停效果 */
.glowing-arrow:hover {
  animation: glowHover 0.6s ease-in-out infinite;
}

@keyframes glowHover {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(0, 198, 255, 1)) 
            drop-shadow(0 0 25px rgba(0, 198, 255, 0.8))
            drop-shadow(0 0 35px rgba(0, 198, 255, 0.6))
            drop-shadow(0 0 45px rgba(0, 198, 255, 0.4));
    transform: scale(1.2);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(0, 198, 255, 1)) 
            drop-shadow(0 0 30px rgba(0, 198, 255, 0.9))
            drop-shadow(0 0 40px rgba(0, 198, 255, 0.7))
            drop-shadow(0 0 50px rgba(0, 198, 255, 0.5));
    transform: scale(1.3);
  }
}

/* 点击效果 */
.glowing-arrow:active {
  transform: scale(0.95);
  filter: drop-shadow(0 0 25px rgba(0, 198, 255, 1)) 
          drop-shadow(0 0 35px rgba(0, 198, 255, 0.8))
          drop-shadow(0 0 45px rgba(0, 198, 255, 0.6));
}

.banner-info-box {
  position: absolute;
  width: 1400px;
  top: 0;
  bottom: 0;
  left: calc(50% - 700px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 99;
  animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-info {
  position: absolute;
  width: 1400px;
  height: 340px;
}

.banner-title {
  font-weight: 900;
  font-size: 60px;
  color: white;
}

.banner-title2 {
  margin-top: 20px;
  font-size: 26px;
  font-weight: 700;
  color: white;
}


.banner-data-item {
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 21, 42, 0.8) 0%, rgba(0, 86, 210, 0.8) 100%);
  color: white;
  width: 200px;
  border-radius: var(--radius-lg);
  margin-right: 20px;
  margin-top: 30px;
  font-weight: 600;
  font-size: 22px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 198, 255, 0.3);
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  animation: float 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.2s);
  box-shadow: var(--shadow-soft);
}

.banner-data-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 198, 255, 0.3), transparent);
  transition: left var(--transition-slow);
}

.banner-data-item:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: var(--shadow-hover);
  border-color: var(--electric-blue);
}

.banner-data-item:hover::before {
  left: 100%;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.data-info-1 {
  margin-top: 20px;
}

.data-info-2 {
  color: var(--electric-blue);
  text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
}

.data-info-2-num {
  font-size: 38px;
  font-weight: 700;
}

.data-info-3 {
  margin-bottom: 20px;
}

.info-left {
  width: 996px;
}

.list-radio-box {
  padding: 20px 0 0 0;
}

/* 电力蓝主题单选按钮 */
.list-radio-box /deep/ .el-radio {
  color: var(--primary-blue-dark);
  height: 40px;
  padding: 0 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
  border: 2px solid var(--primary-blue);
  background: white;
  position: relative;
  overflow: hidden;
}

.list-radio-box /deep/ .el-radio::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: left var(--transition-normal);
  z-index: -1;
}

.list-radio-box /deep/ .el-radio__label {
  padding-left: 0;
  font-weight: 600;
  font-size: 14px !important;
  letter-spacing: 0.5px;
}

.list-radio-box /deep/ .el-radio.is-bordered.el-radio--small .el-radio__inner {
  display: none;
}

.list-radio-box /deep/ .el-radio.is-bordered {
  border: 2px solid var(--primary-blue);
  background-color: white;
  box-shadow: var(--shadow-soft);
}

.list-radio-box /deep/ .el-radio.is-bordered.is-checked {
  background: var(--gradient-primary);
  border-color: var(--primary-blue);
  color: white;
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.list-radio-box /deep/ .el-radio__input.is-checked+.el-radio__label {
  color: white;
  font-weight: 700;
}

.list-radio-box /deep/ .el-radio:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--electric-blue);
}

.list-box {
  overflow: hidden;
}

.list-item {
  width: 477px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  background: white;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 123, 255, 0.1);
  animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-card);
  transition: left var(--transition-slow);
}

.list-item:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-blue);
}

.list-item:hover::before {
  left: 100%;
}

/* 应用头部布局 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 15px 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
}

/* 应用标题样式 */
.app-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-blue-dark);
  line-height: 1.3;
  flex: 1;
  margin-right: 15px;
}

/* 右侧小logo样式 */
.app-mini-logo {
  flex-shrink: 0;
}

.mini-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(53, 107, 226, 0.9), rgba(0, 242, 241, 0.9));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  box-shadow: 0 3px 8px rgba(53, 107, 226, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.list-item:hover .mini-logo-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 4px 12px rgba(53, 107, 226, 0.4);
}

/* 应用介绍区域样式 */
.app-description {
  padding: 0 15px;
  margin-bottom: 15px;
}

.app-content {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.app-meta-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-developer {
  color: var(--primary-blue-dark);
  font-weight: 500;
}

.app-date {
  color: #999;
}

.app-type-tag {
  display: inline-block;
  background: linear-gradient(135deg, rgba(53, 107, 226, 0.1), rgba(0, 242, 241, 0.1));
  color: var(--primary-blue-dark);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(53, 107, 226, 0.2);
}

.list-title {
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: var(--primary-blue-dark);
  margin: 10px;
  letter-spacing: 0.5px;
}

.list-type {
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333;
  margin: 0 0 10px 10px;
}

.list-tips {
  padding: 0 10px 15px 10px;
}

.tip-item {
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: var(--primary-blue-dark);
  border: 1px solid var(--primary-blue);
  padding: 4px 13px;
  border-radius: var(--radius-sm);
  background: var(--secondary-blue);
  transition: var(--transition-normal);
}

.tip-item:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-1px);
}

.list-time {
  color: #7F7F7F;
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 10px;
  margin-bottom: 20px;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
}

.empty-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

.footer {
  background: linear-gradient(180deg, rgba(22, 22, 24, 1) 0%, rgba(0, 0, 0, 1) 100%);
  height: 70px;
  line-height: 70px;
  text-align: center;
  color: white;
  font-size: 14px;
}


.right-list-box {
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  width: 400px;
  padding: var(--spacing-lg);
  margin-top: 20px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 123, 255, 0.1);
  box-shadow: var(--shadow-soft);
  transition: var(--transition-normal);
  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.right-list-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: var(--transition-normal);
}

.right-list-box:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-blue);
}

.right-list-box:hover::before {
  opacity: 1;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.r-list-icon {
  width: 22px;
  height: 22px;
}

.r-list-title {
  flex: 1;
  margin-left: 6px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}



.r-list-item {
  margin-top: 16px;
  transition: var(--transition-normal);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid transparent;
}

.r-list-item:hover {
  background: var(--gradient-card);
  transform: translateX(8px);
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-soft);
}

.r-list-icon2 {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 10px;
}

.r-list-txt {
  width: 300px;
}

.r-list-info1 {
  font-size: 16px;
  color: #333;
}

.r-list-info2 {
  font-size: 14px;
  color: #7F7F7F;
  margin-top: 5px;
}

/* ==================== 应用图标样式 ==================== */

.app-icon-container {
  width: 50px;
  height: 50px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.app-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border-radius: 12px;
  pointer-events: none;
}

.app-icon:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.app-icon-text {
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 1;
  position: relative;
}

/* 图标悬停效果 */
.r-list-item:hover .app-icon {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* 响应式图标 */
@media (max-width: 768px) {
  .app-icon-container {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  
  .app-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
  
  .app-icon-text {
    font-size: 16px;
  }
}

/* 图标动画效果 */
@keyframes iconPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.r-list-item:hover .app-icon {
  animation: iconPulse 0.6s ease-in-out;
}
</style>